<template>

    <div>
        <el-row ref="summarization" :model="info" :gutter="20">
            <el-col :span="4">
                <el-card class="box-card">
                    <div slot="header" class="clearfix">
                        <span class="t1">事务</span>
                    </div>
                    <div class="body">
                        <span>总事务：{{ this.info.totalTrans }}</span>
                        <br>
                        <span>成功率：{{ this.info.transSucRate * 100 }}%</span>
                    </div>
                </el-card>

            </el-col>
            <el-col :span="4">
                <el-card class="box-card">
                    <div slot="header" class="clearfix">
                        <span class="t1">响应时间</span>
                    </div>
                    <div class="body">
                        <span>平均：{{ this.info.rtAvgTime }}ms</span>
                        <br>
                    </div>
                </el-card>
            </el-col>
            <el-col :span="4">
                <el-card class="box-card">
                    <div slot="header" class="clearfix">
                        <span class="t1">TPS</span>
                    </div>
                    <div class="body">
                        <span>平均：{{ this.info.tpsAvgTimes }}/s</span>
                    </div>
                </el-card>
            </el-col>
            <el-col :span="4">
                <el-card class="box-card">
                    <div slot="header" class="clearfix">
                        <span class="t1">网络流量</span>
                    </div>
                    <div class="body">
                        <span>发送流量： {{ this.info.txMb }}MB</span>
                        <br>
                        <span>接收流量： {{ this.info.rtMb }}MB</span>
                    </div>
                </el-card>
            </el-col>
            <el-col :span="4">
                <el-card class="box-card">
                    <div slot="header" class="clearfix">
                        <span class="t1">错误统计</span>
                    </div>
                    <div class="body">
                        <span>错误数： {{ this.info.transErrorNum }}</span>
                    </div>
                </el-card>
            </el-col>

        </el-row>
        <el-row style="background:#fff;padding:5px 5px 0;margin-bottom:16px;margin-top: 16px;">
            <wetest-line-chart2 ref="sumOnlienChart" :chart-data="sumOnlienChartData" />
            <wetest-line-chart2 ref="sumTxRtChartData" :chart-data="sumTxRtChartData" />
            <wetest-line-chart2 ref="sumTpsChartData" :chart-data="sumTpsChartData" />
        </el-row>
        <el-row style="text-align: center;">
            <h3><b>事务统计数据</b></h3>
            <el-table :data="transMetricList" style="width: 100%" :default-sort="{ prop: 'number' }">
                <el-table-column prop="number" label="序号" />
                <el-table-column prop="transName" label="事务名" width="260" />
                <el-table-column prop="rxPacks" label="总数" />
                <el-table-column prop="succNum" label="成功数" />
                <el-table-column prop="failNum" label="失败数" />
                <el-table-column prop="errorNum" label="错误数" />
                <el-table-column prop="timeoutNum" label="超时数" />
                <el-table-column label="成功率">
                    <template slot-scope="scope">
                        {{ scope.row.succRate * 100 }}%
                    </template>
                </el-table-column>

                <el-table-column prop="tps" label="TPS" />
                <el-table-column prop="maxCost" label="最大耗时" />
                <el-table-column prop="minCost" label="最小耗时" />
                <el-table-column prop="avgCost" label="平均耗时" />
                <el-table-column prop="p50" label="50%耗时" />
                <el-table-column prop="p75" label="75%耗时" />
                <el-table-column prop="p90" label="90%耗时" />
                <el-table-column prop="p95" label="95%耗时" />
                <el-table-column prop="p99" label="99%耗时" />
               <!--  <el-table-column prop="p999" label="99.9%耗时" /> -->
                <el-table-column  label="合格">
                    <template slot-scope="scope">
                        <el-tag size="mini" type="danger" v-if="scope.row.expectTps ==''||scope.row.expectTps==null">未配置</el-tag>
                        <el-tag size="mini" type="success" v-else-if="scope.row.tps >= scope.row.expectTps" >
                            true [{{ scope.row.expectTps  }}]
                        </el-tag>
                        <el-tag size="mini" type="warning" v-else-if="scope.row.tps< scope.row.expectTps">
                            false [{{ scope.row.expectTps  }}]
                        </el-tag>
                    </template>
                </el-table-column>

            </el-table>

        </el-row>
    </div>
</template>

<style>
.clearfix {
    text-align: center;
}

.t1 {
    /* font-size: larger; */
    font-weight: bold;
}

.box-card {
    height: 120px;
}
</style>

<script>

import { reportRuleInfo } from "@/api/wetest/stress";

import wetestLineChart from "./wetestLineChart"
import wetestLineChart2 from "./wetestLineChart2"
import wetestLineChart3 from "./wetestLineChart3"

export default {
    components: {
        wetestLineChart,
        wetestLineChart2,
        wetestLineChart3
    },
    props: {
        info: {
            type: Object,
            default: {}
        },
        ruleInfo: {
            type: String,
            default: "111"
        }
    },
    watch: {
        info: {
            deep: true,
            handler(val) {
                this.updateData(val);
            }
        }
    },
    data() {
        return {
            sumOnlienChartData: {
                title: "在线人数",
                cdata: [
                    { name: "在线人数", data: [] }
                ],
                yName: "人数"
            },
            sumTxRtChartData: {
                title: "收发包率",
                cdata: [
                    { name: "发包率", data: [["1999-6-1", 666], ["1999-7-1", 444]] },
                    { name: "收包率", data: [["1999-6-1", 111], ["1999-7-1", 333]] }
                ],
                yName: "个/每秒"
            },
            sumTpsChartData: {
                title: "TPS",
                cdata: [
                    { name: "TPS", data: [] }
                ],
                yName: "个/秒"
            },
            transMetricList: [],
        };
    },
    created() {
        this.updateData(this.info);
    },

    methods: {
        updateData(info) {
            if (info != null) {
                this.sumOnlienChartData.cdata[0].data = Object.freeze(info.onlineData);
                this.sumTpsChartData.cdata[0].data = Object.freeze(info.tpsData);
                this.sumTxRtChartData.cdata[0].data = Object.freeze(info.txRateData);
                this.sumTxRtChartData.cdata[1].data = Object.freeze(info.rtRateData);
                this.transMetricList = info.transMetricList;
            }

        },
        loadRule(tml) {
          /*   reportRuleInfo(1).then(response => {
                let d = response.data;
                let n = []
                for (let index = 0; index < tml.length; index++) {
                    let element = tml.transMetricList[index];
                    let tps = d[element.transName]
                    if (tps != null) {
                        element.qc = element.tps >= tps
                    }
                    n.push(element);

                }
                this.transMetricList = n;
            }); */

        }
        /*   reloyout(){
              this.$refs.sumTpsChartData.getChart().resize();
              this.$refs.sumTxRtChartData.getChart().resize();
              this.$refs.sumOnlienChart.getChart().resize();
          } */

    }

};
</script>